<!--
 * @Author: atao
 * @Date: 2023-10-24 17:31:47
 * @LastEditTime: 2023-10-27 20:16:18
 * @FilePath: \三阶段项目\pili-pili-app\src\pages\types\index.vue
-->
<template>
  <div class="type-box">
    <van-nav-bar left-arrow @click-left="router.go(-1)">
      <!-- vant组件的插槽 -->
      <template #title>
        <van-button type="default" round>
          搜索
          <van-icon name="search" />
        </van-button>
      </template>
    </van-nav-bar>
    <div class="main">
      <div class="left">
        <div
          :class="['item', actType === it && 'act']"
          v-for="it in types"
          @click="changeit(it)"
          :key="it"
        >
          {{ it }}
        </div>
      </div>
      <div class="right" ref="myNode" @scroll="handleScroll()">
        <div
          class="r-box"
          v-for="it in products"
          :key="it.title"
          :id="it.title"
          ref="myNode1"
        >
          <div class="r-title">
            {{ it.title }} <span v-if="it.hot">人气排行</span>
          </div>

          <div class="r-content">
            <div class="item" v-for="item in it.items" :key="item">
              <img :src="baseURL + item.path" alt="" />
              <span>{{ item.txt }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
/** 全局变量 */
const baseURL = window.baseURL;
import { ref } from "vue";
import { useRouter } from "vue-router";
import { typesListApi } from "../../apis/typesApi";
import { Ref } from "vue";
import { onMounted } from "vue";

interface products {
  title: String;
  items: Array<any>;
  hot?: String;
}
// const value = ref("");
const router = useRouter();
const types: any = ref([]);
//默认选中的类型
const actType: Ref<string> = ref("");
//类型详情数据
const products: any = ref([]);
//获取dom元素
const myNode: Ref<HTMLDivElement>=ref() as Ref<HTMLDivElement>;

//获取分类列表数据
typesListApi().then((_res) => {
  if (_res.code === 200) {
    types.value = _res.data.map((it: any) => {
      return it.title;
    });
    actType.value = types.value[0];
    products.value = _res.data.map((it: any) => {
      it.hot = ["手办雕像", "漫展", "IP", "周边"].includes(it.title)
        ? "/hot"
        : "";
      return it;
    });
    // console.log(products.value);
  }
});
//点击切换事件
function changeit(it: any) {
  let top: any = 0;
  // console.log(types)
  for (let item of types.value) {
    if (it === item) {
      break;
    } else {
      top += document.getElementById(item)?.clientHeight || 0;
    }
  }
   actType.value = it;
  myNode.value.scrollTop = top;
 
  // console.log(myNode, top);
}
const myNode1 = ref([]); // 存储dom列表
//其是引用数据类型 所以展开的时候会关联上
onMounted(() => {
  console.log(JSON.stringify(myNode1.value));
});

//滑动事件
function handleScroll() {
  // console.log(myNode.value.scrollTop)
  for (let item of types.value) {
    let height: any = document.getElementById(item)?.offsetTop;
    if (myNode.value.scrollTop+100 > height) {
      actType.value = item;
      console.log(myNode.value.scrollTop, height);
      console.log(actType.value,item)
    }
  }
}
</script>

<style lang="less" scoped>
@import "../../style/common.less";

.type-box {
  display: block;
  position: fixed;
  height: 100%;
  background: @g01;
  > .main {
    display: flex;
    height: 100%;
    position: relative;
    > .left {
      flex: 0 0 90px;
      height: 100%;
      display: flex;
      position: relative;
    top: 50px;
    z-index: 9999;
      flex-direction: column;
      justify-content: space-evenly;
      // padding: 10px 0 0 10px;
      background-color: @g01;
      overflow-y: scroll;
      > .item {
        height: 100%;
        line-height: 60px;
        padding-left: 10px;
        font-size: 18px;
        border-radius: 8px;
        background-color: @g03;
        position: relative;
      }
      > .act {
        background-color: @g01;
        color: @b7;
        &::before {
          content: "";
          position: absolute;
          left: 6px;
          top: 20px;
          width: 2px;
          height: 30%;
          border-radius: 8px;
          background-color: @b7;
        }
      }
    }
    > .right {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow-x: hidden;
      > .r-box {
        // margin: 5px;
        > .r-title {
          line-height: 60px;
          margin-left: 10px;
          font-size: 15px;
          position: relative;
          > span {
            display: block;
            width: 100px;
            line-height: 22px;
            padding: 0 5px;
            position: absolute;
            left: 180px;
            top: 14px;
            border-top-left-radius: 8px;
            border-bottom-left-radius: 8px;
            background: @p3;
            color: @b7;
          }
        }
        > .r-content {
          display: flex;
          flex-wrap: wrap;
          margin: 0 15px;
          text-align: center;
          > .item {
            flex: 0 0 33%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-size: 16px;
            > img {
              width: 50px;
              // margin-bottom: 5px;
            }
            > span {
              margin-bottom: 8px;
            }
          }
        }
      }
    }
  }
}

//vant组件重写样式
::v-deep .van-search__content--round {
  border: 1px solid @b7;
  background: @g01;
}
.notice-swipe {
  height: 40px;
  line-height: 40px;
}
.van-search {
  padding: 10px 0;
  background: @g03;
}
.van-nav-bar {
  background: @g01;
  padding: 5px;
}
::v-deep .van-nav-bar__left {
  padding: 0;
}
::v-deep .van-nav-bar__title {
  flex: 1;
  max-width: calc(100% - 50px);
  margin: 0 10px 0 40px;
  // margin: 10px 0;
}
.van-button {
  width: 100%;
  border: 1px solid @b7;
  position: relative;
  color: @b7;
}
.van-icon-search:before {
  position: absolute;
  left: -155px;
  top: -16px;
  font-size: 25px;
}
::v-deep .van-icon-arrow-left:before {
  font-size: 22px;
}
</style>

